// .importDark (@skinName);

// 修复label过长
.layui-form-label {
	text-overflow: ellipsis;
	// overflow: hidden;
	white-space: nowrap;

	// background: #f00;
	// border: 1px solid #f00;

	&:after {
		content: attr(data-tip);
		position: absolute;
		left: 0;
		top: 0;
		// border: 1px solid #f00;
		box-sizing: border-box;
		white-space: normal;
		width: 100%;
		height: auto;
		display: none;
	}

	&:hover {
		// overflow: auto;
		position: relative;

		&:after {
			display: block;
			background: #000;
			white-space: normal;
			position: absolute;
			z-index: 999;
		}

		// white-space: pre-wrap;
		// display: block;
		// width: auto;
		// min-width: 80px;
		// background: #f00;
		// position: absolute;
		// height: 15px;
		// border: 1px solid #f00;

		// &+.layui-input-inline {
		//     margin-left: 125px;
		// }

		// &+.layui-input-block {
		//     margin-left: 125px;
		// }
		// content: attr(data-tip);
		// border: 1px solid #f00;
		// position: absolute;
		// width: 80px;
	}
}

.form-item-full {
	.layui-form-label {
		width: 100% !important;
		text-align: left;
	}

	.layui-input-block {
		width: 100%;
		margin-left: 0 !important;
		padding: 0 0 0 20px;
		box-sizing: border-box;
	}
}

.form-label-lg {
	@labelWidth: 160px;

	.layui-form-label {
		width: @labelWidth;

		&:hover {
			// white-space: pre-wrap;
			// display: block;
			// width: @labelWidth;
			// // min-width: 80px;
			// position: absolute;
			// height: 15px;
			// border: 1px solid #f00;

			// &+.layui-input-inline {
			//     margin-left: 125px;
			// }
		}
	}

	.layui-input-block {
		margin-left: @labelWidth+30px;
	}
}

.layui-text-block {
	// line-height: 100%;
	display: flex;
	align-items: center;
	word-break: break-all;
	.layui-form-select {
		width: 100%;
	}
	// & *{
	//     flex:1;
	// }
	// color: @body-font-color;
}

.layui-form-item {
	.layui-form-label {
		padding: 9px 15px 6px 15px;
	}
}
.form-item-space {
	& > div {
		padding: 8px 0;
	}
}
.form-focus {
	outline: none;
	&:-webkit-autofill {
		-webkit-box-shadow: 0 0 0px 1000px white inset !important;
	}
	&:active,
	&:hover,
	&:focus {
		border: 1px solid #f00 !important;
	}
	border: 1px solid #f00 !important;
	& ~ .tips {
		position: absolute;
		bottom: -20px;
		background: #000;
		padding: 4px;
	}
}
// 附件上传
@upload-box-size: 180px;
@upload-box-close: 24px;

@{uiName}uploader-control {
	padding-top: 10px;

	ul {
		li {
			width: @upload-box-size;
			height: @upload-box-size;
			display: inline-block;
			margin: 0 5px 5px 0;
		}
	}

	@{uiName}uploader-item,
	@{uiName}uploader {
		float: left;
		width: 100%;
		height: @upload-box-size;
		// padding: 25% 0;
		box-sizing: border-box;
	}

	@{uiName}uploader-item {
		position: relative;
		// margin: 0 6px 6px 0;
		padding: 4px;
		// background: no-repeat center center;
		// background-size: cover;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;

		& .close {
			background: #f00;
			position: absolute;
			right: 0;
			top: 0;
			// z-index: 99;
			font-size: @upload-box-close -1;
			color: #fff;
			width: @upload-box-close;
			height: @upload-box-close;
			line-height: @upload-box-close;
			text-align: center;
		}

		img {
			max-width: 100%;
			max-height: 100%;
		}

		@{uiName}uploader-mark {
			background: rgba(0, 0, 0, 0.8);
			position: absolute;
			width: 100%;
			height: 100%;
			color: #fff;
			text-align: center;
			padding: 15% 0;
			box-sizing: border-box;

			p {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50%;
				font-size: 18px;
			}

			.zkuasgm-icon {
				font-size: @upload-box-size / 3;
				box-sizing: border-box;
			}
		}
	}

	@{uiName}uploader {
		position: relative;
		margin-right: 6px;
		margin-bottom: 6px;
		border: 1px solid #d9d9d9;
		cursor: pointer;
	}

	@{uiName}uploader:active {
		background-color: #efefef;
	}

	@{uiName}uploader:before {
		height: 2px;
		width: 40px;
	}

	@{uiName}uploader:after {
		width: 2px;
		height: 40px;
	}

	@{uiName}uploader:before,
	@{uiName}uploader:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}
}

.layui-footer {
	text-align: right;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px 10px;
	position: fixed;
}

@build-tab-border-color: #000;

.build-nav {
	margin: 0 0 10px 0;
	background: lighten(#2c2c34, 10%);
	position: relative;

	.layui-tab-title {
		border-color: @build-tab-border-color;

		.layui-badge {
			top: 0;
		}

		li {
			color: #999;

			span {
				margin: 0 5px;
			}
		}

		.layui-this {
			color: #fff;
			background: #26293a;

			&:after {
				border-color: @build-tab-border-color;
				border-bottom: 1px solid #26293a;
				// border-bottom: 0;
			}
		}
	}

	.layui-tab-btn {
		position: absolute;
		right: 5px;
		top: 5px;
	}
}

.build-info {
	border-top: 1px solid #666;
	padding: 8px 0;

	.layui-form-label2 {
		float: left;
		display: block;
		padding: 2px 15px;
		width: 80px;
		font-weight: 400;
		line-height: 20px;
		text-align: right;
		color: #a6afcc;

		.layui-form-mid {
			margin: 0;
		}
	}

	.build-num-list {
		flex-grow: 1;

		ul {
			li {
				display: inline-block;
				width: 100px;
				margin: 0 10px 5px 0;
				position: relative;

				input {
					& + span {
						position: absolute;
						top: 10px;
						right: 5px;
					}

					&.dotted-input {
						border: 1px dotted #fff;
					}
				}
			}
		}
	}

	.build-num-btn {
		flex-grow: 0;

		& .layui-btn {
			margin: 0 0 8px 0;

			& + .layui-btn {
				margin-left: 0px;
			}
		}
	}
}

// 楼层列表
.level-list {
	overflow: hidden;

	button {
		float: left;
		width: 60px;
		margin: 0 0 10px 10px;

		// &:first-child {
		//     margin-left: 10px;
		// }
	}
}

.layui-form-btn-box {
	// height: 50px;
	// position: fixed;
	position: relative;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 58px;
	box-sizing: border-box;

	.layui-form-btn-main {
		width: 100%;
		position: fixed;
		// position: absolute;
		z-index: 102;
		bottom: 0;
		left: 0;
		// right: 0;
		// padding: 5px 0px 5px 0;

		text-align: right;

		background-color: #fff;
		border: 0px;
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;

		input {
			margin: 0 10px 0 0;
		}
	}
}

// .layui-form {
//     .layui-form-btn-box {
//         .layui-form-btn-main {
//             margin-left: -15px;
//         }
//     }
// }

.formList {
	.layui-form-item {
		display: inline-block;
	}
}

.layui-form-item {
	xm-select {
		& > .xm-body {
			padding: 10px;

			.xm-option-content {
				justify-content: space-between;
				// white-space: normal;

				span {
					position: relative !important;
					float: right;
					white-space: normal;
					right: 0 !important;
					padding: 0 6px !important;
				}
			}

			.xm-option {
				background: none !important;
			}
		}
	}
}
.flex-layout {
	fieldset {
		margin: 20px 0;
	}
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	& > .main-box {
		flex: auto;
		overflow: auto;
		.scrollbar();
	}
	& > .footer {
		text-align: right;
	}
}
.custon-form-bk {
	display: flex;
	.tx-box {
		display: flex;
		flex-direction: column;
		padding: 10px;
		& > div {
			text-align: center;
			&.btn-box {
				padding: 6px 0;
			}
		}
	}
}
.custom-form {
	// display: flex;

	// .xm-select-demo{
	//     border:1px solid #f00;
	//     width: 100% !important;
	// }

	& > ul {
		display: flex;
		flex-wrap: wrap;
		border: 1px solid rgba(0, 0, 0, 0.2);
		flex: 1;
		// margin-top:-1px;
		// margin-left:-10px;
		&.col1 {
			li {
				width: 100%;
			}
		}
		&.col2 {
			li {
				width: 50%;
			}
		}
		&.col3 {
			li {
				width: 33.3333%;
			}
		}
		&.col4 {
			li {
				width: 25%;
			}
		}
		&.col5 {
			li {
				width: 20%;
			}
		}
		li {
			list-style: none;
			width: 33.3333%;
			display: flex;
			// padding:10px 0;
			// border-bottom:1px solid  rgba(0,0,0,.5);
			// border:1px solid rgba(0,0,0,.3);
			margin-left: -1px;
			margin-top: -1px;
			box-sizing: border-box;
			border-bottom: 1px solid #eee;
			& > .label {
				padding: 8px;
				flex: 0 0 130px;
				text-align: right;
				background: rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: flex-end;
				&.red {
					color: #f00;
				}
			}
			& > .form-main {
				flex: 1;
				padding: 6px;
				display: flex;
				// align-items: center;
				& > .form-main-block {
					// display: flex;
					flex: 1;
					align-items: center;
				}
				& > .tips {
					padding: 8px 4px;
				}
				&.col {
					flex-direction: column;
				}
			}
			&.full {
				width: 100%;
			}
		}
	}
	.slider {
		margin: 16px 0 0 8px;
		width: 80%;
		& ~ .slider-text {
			padding: 6px;
		}
	}
}
.upload-img-list {
	display: flex;
	padding: 4px;
	img {
		width: 120px;
		height: 120px;
		border: 1px solid #ccc;
		padding: 4px;
		margin: 0 4px 4px 0;
	}
}
.custom-btn {
	cursor: pointer;
	padding: 10px;
	color: #fff;
	margin: 10px 0;
	&.btn-round {
		border-radius: 5px;
	}
	&.bg-none {
		background: none;
	}
	&.btn-full {
		width: 100%;
	}
	&.btn-normal {
		border: 1px dashed #ccc;
	}
}
.required::before {
	content: "*";
	color: #f00;
	padding: 0 5px;
	display: inline-block;
}
.ui-dark {
	// form
	@main-color: #2e60b2;
	@layui-form-color: #ebedef;
	@layui-form-bg: #2c2c34;
	@layui-form-border-color: #2c2c34;
	@form-label-color: #a6afcc;
	.layui-form-label {
		color: @form-label-color;
	}

	.layui-input,
	.layui-select,
	.layui-textarea {
		color: @layui-form-color;
		background-color: @layui-form-bg;
		border-color: @layui-form-border-color;
	}
	.layui-input,
	.layui-textarea {
		&:hover,
		&:focus {
			// border:1px solid  rgba(255, 255, 255, 0.2) !important;
		}
	}
	// .layui-input:hover,
	// .layui-textarea:hover {
	//     border-color: rgba(255, 255, 255, 0.2) !important;
	// }

	// .layui-input:focus,
	// .layui-textarea:focus {
	//     border-color: rgba(255, 255, 255, 0.5) !important;
	// }

	.layui-form-select {
		dl {
			background-color: #2c2c34;
			border: 1px solid #333;
			.scrollbar();

			dd {
				color: #999;

				&:hover {
					background-color: #4799eb;
					color: #fff;
				}

				&.layui-this {
					background-color: #4799eb;
					color: #fff;
				}
			}
		}
	}

	.layui-form-checkbox {
		&:hover {
			span {
				background: darken(@layui-form-bg, 10%);
			}

			i {
				border: 1px solid darken(@layui-form-bg, 30%);
			}
		}

		span {
			background-color: lighten(@layui-form-bg, 5%);
			// background: #f00;
			border-radius: 0;
		}

		i {
			background-color: darken(@layui-form-bg, 5%);
			border: 1px solid darken(@layui-form-bg, 30%);
			border-radius: 0;
		}
		&[lay-skin="primary"] {
			span {
				color: #fff;
				background: none;
			}
			i {
				border: 0;
			}
		}
	}
	// .layui-form-checkbox[lay-skin=primary] span {
	//     color: #f00;
	// }
	.layui-form-checked {
		&:hover {
			span {
				background-color: @main-color;
			}

			i {
				background-color: darken(@main-color, 10%);
				border: 1px solid darken(@main-color, 30%);
				border-radius: 0;
			}
		}

		span {
			background-color: @main-color;
		}

		i {
			background-color: darken(@main-color, 10%);
			border: 1px solid darken(@main-color, 30%);
			border-radius: 0;
		}
	}

	.layui-form {
		xm-select {
			color: @layui-form-color;
			background-color: @layui-form-bg !important;
			border-color: @layui-form-border-color;
			border: 0 !important;

			.xm-input {
				background-color: rgba(255, 255, 255, 0) !important;
			}

			& > .xm-body {
				background-color: @layui-form-bg !important;
				border: 0 !important;

				.xm-toolbar {
					padding: 5px 0;
					margin: 0;

					.toolbar-tag {
						span {
							background-color: lighten(@layui-form-bg, 10%);
							border: 1px solid lighten(@layui-form-bg, 5%);
							color: rgba(255, 255, 255, 1) !important;
							border-radius: 3px;
							padding: 0px 8px;
						}
					}
				}

				.xm-search {
					background-color: darken(@layui-form-bg, 5%) !important;
				}

				.xm-search-input {
					border: 0;
					color: #fff;
				}

				.scroll-body {
					.selected {
						background-color: darken(@layui-form-bg, 5%) !important;
					}

					.xm-option {
						// background: none !important;

						.xm-option-content {
							color: #fff !important;
						}

						&:hover {
							background-color: lighten(@layui-form-bg, 5%) !important;
						}
					}
				}

				.xm-paging {
					& > span {
						background-color: lighten(@layui-form-bg, 10%);
						border: 1px solid lighten(@layui-form-bg, 5%);
						color: rgba(255, 255, 255, 0.5) !important;
					}
				}
			}
		}
	}

	.layui-select-disabled {
		@input-disabled-color: #aaa;

		.layui-disabled {
			border-color: @input-disabled-color !important;
			border: 0;
			color: @input-disabled-color !important;

			&::-webkit-input-placeholder {
				/* WebKit browsers */
				color: @input-disabled-color !important;
			}
		}

		.layui-edge {
			border-top-color: @input-disabled-color !important;
		}
	}

	.layui-form-btn-box {
		.layui-form-btn-main {
			background-color: #20202a !important;
		}
	}
}
